<%@ page import="com.apexedu.portal.constant.Constants" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt" %>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%
    request.setAttribute("basePath", request.getContextPath());
%>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
    <title><%=Constants.ProjectInfo.PROJECT_NAME%>
    </title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <link href="${basePath}/resources/css/mh.shd.css" rel="stylesheet">
    <script type="text/javascript" src="${basePath}/resources/ui/js/jquery-1.10.2.min.js"></script>
    <script src="${basePath}/resources/js/mh.shd.index.js" type="text/javascript"></script>
    <script src="${basePath}/resources/js/shd/pie_entity.js" type="text/javascript"></script>
    <script src="${basePath}/component/layer/layer.js" type="text/javascript"></script>
</head>
<body>
<script type="application/javascript">
    $(document).ready(function() {

        //Default Action
        $(".tab_content").hide(); //Hide all content
        $("ul.tabs li:first").addClass("active").show(); //Activate first tab
        $(".tab_content:first").show(); //Show first tab content

        //On Click Event
        $("ul.tabs li").click(function() {
            $("ul.tabs li").removeClass("active"); //Remove any "active" class
            $(this).addClass("active"); //Add "active" class to selected tab
            $(".tab_content").hide(); //Hide all tab content
            var activeTab = $(this).find("a").attr("href"); //Find the rel attribute value to identify the active tab + content
            $(activeTab).fadeIn(); //Fade in the active content
            return false;
        });

    });
</script>
<style>

    .container {width: 500px; margin: 10px auto;}
    ul.tabs {
        margin: 0;
        padding: 0;
        float: left;
        list-style: none;
        height: 32px;
        border-bottom: 1px solid #999;
        border-left: 1px solid #999;
        width: 100%;
    }
    ul.tabs li {
        float: left;
        margin: 0;
        padding: 0;
        height: 31px;
        line-height: 31px;
        border: 1px solid #999;
        border-left: none;
        margin-bottom: -1px;
        background: #e0e0e0;
        overflow: hidden;
        position: relative;
    }
    ul.tabs li a {
        text-decoration: none;
        color: #000;
        display: block;
        font-size: 1.2em;
        padding: 0 20px;
        border: 1px solid #fff;
        outline: none;
    }
    ul.tabs li a:hover {
        background: #ccc;
    }
    html ul.tabs li.active, html ul.tabs li.active a:hover  {
        background: #fff;
        border-bottom: 1px solid #fff;
    }
    .tab_container {
        border: 1px solid #999;
        border-top: none;
        clear: both;
        float: left;
        width: 100%;
        background: #fff;
        -moz-border-radius-bottomright: 5px;
        -khtml-border-radius-bottomright: 5px;
        -webkit-border-bottom-right-radius: 5px;
        -moz-border-radius-bottomleft: 5px;
        -khtml-border-radius-bottomleft: 5px;
        -webkit-border-bottom-left-radius: 5px;
    }
    .tab_content {
        padding: 20px;
        font-size: 1.2em;
    }
    .tab_content h2 {
        font-weight: normal;
        padding-bottom: 10px;
        border-bottom: 1px dashed #ddd;
        font-size: 1.8em;
    }
    .tab_content h3 a{
        color: #254588;
    }
    .tab_content img {
        float: left;
        margin: 0 20px 20px 0;
        border: 1px solid #ddd;
        padding: 5px;
    }

</style>
<div id="main">
    <jsp:include page="left.jsp"/>
    <div id="right">
        <jsp:include page="head.jsp"/>
        <div id="content">
            <div class="content1">
                <div class="active">
                    <iframe allowtransparency="true" frameborder="0" width="100%" height="350" scrolling="no" id="lcdb"  src="${basePath}/s/uc/shd/chargeprocess-5(6)"></iframe>
                </div>
            </div>
            <div class="content1">
                <div class="active">
                    <div class="section">
                        <div class="title">
                            <div class="h3 ">服务大厅</div>
                            <a href="javascript:;" style="color:#ffffff" target="_blank"><button type="button" onclick="window.open('${basePath}/s/uc/se/i/dyfw')">更多</button></a>
                        </div>
                        <c:forEach items="${dyfw}" var="item">
                            <div class="service">
                                <div class="serve">
                                    <img src="${basePath}/resources/images/shd/icons/${item.tb}" alt="" onerror="this.src='${basePath}/resources/images/shd/icon_banshidating.png'">
                                    <span>${item.menuname}</span>
                                </div>
                                <div class="hide">
                                    <div class="cont">
                                        <span onclick="window.open('${basePath}/s/uc/se/sd/${item.menuid}')"><a href="javascript:;">服务详情</a></span>
                                        <span class="on" onclick="var url=encodeURIComponent('${item.menupath}');window.open('${basePath}/s/uc/yw/index?url='+url)"><a href="javascript:;" >在线办理</a></span>
                                    </div>
                                </div>
                            </div>
                        </c:forEach>
                    </div>
                </div>
            </div>
            <div class="content1">
                <div class="active">
                    <iframe allowtransparency="true" frameborder="0" width="100%" height="350" scrolling="no" id="righttopnews"  src="${basePath}/s/uc/shd/fdn-righttop(6)"></iframe>
                </div>
            </div>
            <div class="content1">

                <ul class="tabs">
                    <li class="active"><a href="#tab1">导航菜单</a></li>
                    <li><a href="#tab4">TAB标签</a></li>
                </ul>
                <div class="tab_container">
                    <div id="tab1" class="tab_content" style="display: block; ">

                        <h3><a href="http://www.freejs.net/article_daohangcaidan_13.html">jquery css多级下拉菜单</a></h3>
                        <p id="">多级菜单，理论上支持无限多的层级，文件结构非常简单的，具体的请看下面的内容</p>
                    </div>

                    <div id="tab4" class="tab_content" style="display: none; ">
                        <h2>各种tab标签选项卡</h2>
                        <h3><a href="http://www.freejs.net/article_tabbiaoqian_17.html">tab标签页面,ajax载入</a></h3>

                        <p> tab标签，jquery ajax载入数据库的内容</p>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

</body>
</html>
